import { Meta } from '@storybook/addon-docs';

<Meta title="Design system/Input Fields" />

<h1 class="text-xl font-semibold mb-lg">Inputs</h1>

<h2 class="text-lg font-semibold mb-md">Standard Input Fields</h2>

<h3 class="text-lg text-muted mb-xs">Inputs</h3>
<p class="mb-md text-muted mb-0">
  A standard input should always have at-least a descriptive label and
  placeholder.
</p>
<p class="mb-md text-muted mb-md">
  We should refrain from using a placeholder-only as the field's label as 1) the
  user won't know what the field is once it's filled and 2) different browsers
  render placeholder's differently (less of a problem).
</p>
<div class="mb-md">
  <label class="block mb-xs font-semibold text-muted">Sample Input</label>
  <input
    type="text"
    class="block w-full h-input shadow-sm rounded border border-gray-300 hover:border-gray-400 focus:outline-0 focus:ring-2 focus:ring-yellow-200 focus:border-yellow-400"
    placeholder="This is a sample input..."
  />
</div>

<p class="text-muted mb-0">
  From a tooltip perspective - we should use them sparingly.
</p>
<p class="text-muted mb-md">
  Anything which is important enough to be included in tooltip copy should be
  important enough to display as hinting text.
</p>
<div class="mb-md">
  <label class="block font-semibold text-muted">Sample Input</label>
  <p class="text-muted text-sm text-wide mb-xs">
    This is a subheader which will describe the input...
  </p>
  <input
    type="text"
    class="block w-full h-input shadow-sm rounded border border-gray-300 hover:border-gray-400 focus:outline-0 focus:ring-2 focus:ring-yellow-200 focus:border-yellow-400"
    placeholder="This is a sample input..."
  />
</div>

<div class="mb-md">
  <div class="flex items-center">
    <label class="block font-semibold text-muted mr-xs">Sample Input</label>
    <svg
      class="cursor-pointer w-5 h-5 text-gray-400 fill-current"
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
    >
      <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm1 16h-2v-2h2v2zm.976-4.885c-.196.158-.385.309-.535.459-.408.407-.44.777-.441.793v.133h-2v-.167c0-.118.029-1.177 1.026-2.174.195-.195.437-.393.691-.599.734-.595 1.216-1.029 1.216-1.627a1.934 1.934 0 0 0-3.867.001h-2C8.066 7.765 9.831 6 12 6s3.934 1.765 3.934 3.934c0 1.597-1.179 2.55-1.958 3.181z"></path>
    </svg>
  </div>
  <p class="text-muted text-sm text-wide mb-xs">
    This is a subheader which will describe the input...
  </p>
  <input
    type="text"
    class="block w-full h-input shadow-sm rounded border border-gray-300 hover:border-gray-400 focus:outline-0 focus:ring-2 focus:ring-yellow-200 focus:border-yellow-400"
    placeholder="This is a sample input..."
  />
</div>

<h3 class="text-lg text-muted mb-xs">Prepend and Append Inputs</h3>
<p class="mb-md text-muted mb-md">
  Helps identify input row context (best used for things like the search
  control).
</p>

<div class="mb-md">
  <label class="block mb-xs font-semibold text-muted">Prepend Input</label>
  <div class="relative mb-xs">
    <svg
      class="absolute left-2 top-2 w-6 h-6 text-gray-400 fill-current"
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
    >
      <path d="M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"></path>
    </svg>
    <input
      type="text"
      class="block w-full pl-9 h-input shadow-sm rounded border border-gray-300 hover:border-gray-400 focus:outline-0 focus:ring-2 focus:ring-yellow-200 focus:border-yellow-400"
      placeholder="This is a sample input..."
    />
  </div>
</div>

<div class="mb-md">
  <label class="block mb-xs font-semibold text-muted">Append Input</label>
  <div class="relative mb-xs">
    <svg
      class="absolute right-2 top-2 w-6 h-6 text-gray-400 fill-current"
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
    >
      <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 15v-4H7v-2h5V7l5 5-5 5z"></path>
    </svg>
    <input
      type="text"
      class="block w-full pr-9 h-input shadow-sm rounded border border-gray-300 hover:border-gray-400 focus:outline-0 focus:ring-2 focus:ring-yellow-200 focus:border-yellow-400"
      placeholder="This is a sample input..."
    />
  </div>
</div>

<h3 class="text-lg text-muted mb-xs">Prepend and Append Box Mask</h3>
<p class="mb-md text-muted mb-md">
  Masks static content. More effective than input-masking/hacking, but should
  still be used sparingly.
</p>

<div class="mb-md">
  <label class="block mb-xs font-semibold text-muted">Sample Input</label>
  <div class="flex shadow-sm rounded w-full">
    <span class="inline-flex items-center h-onput rounded-l text-muted font-semibold px-sm border border-r-0 border-gray-300 bg-gray-50">
      x-hasura-
    </span>
    <input
      type="text"
      class="flex-1 min-w-0 rounded-r w-full h-input border border-gray-300 hover:border-gray-400 focus:outline-0 focus:ring-2 focus:ring-yellow-200 focus:border-yellow-400"
      placeholder="user-id"
    />
  </div>
</div>

<div class="mb-md">
  <label class="block mb-xs font-semibold text-muted">Sample Input</label>
  <div class="flex shadow-sm rounded w-full">
    <input
      type="text"
      class="flex-1 min-w-0 rounded-l w-full h-input border border-gray-300 hover:border-gray-400 focus:outline-0 focus:ring-2 focus:ring-yellow-200 focus:border-yellow-400"
      placeholder="user-id"
    />
    <span class="inline-flex items-center h-onput rounded-r text-muted font-semibold px-sm border border-l-0 border-gray-300 bg-gray-50">
      -to-the-append
    </span>
  </div>
</div>

<h3 class="text-lg text-muted mb-xs">Error Input Error State</h3>
<p class="mb-md text-muted mb-0">
  Each input should have its own error state and error hinting.
</p>
<p class="mb-md text-muted mb-md">
  We include error hinting below the field to not break up the label and input
  by inserting it in the middle.
</p>
<div class="mb-md">
  <label class="block mb-xs font-semibold text-muted">Sample Input</label>
  <div class="relative mb-xs">
    <svg
      class="absolute right-2 top-2 w-6 h-6 text-red-600 fill-current"
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
    >
      <path d="M11.953 2C6.465 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.493 2 11.953 2zM13 17h-2v-2h2v2zm0-4h-2V7h2v6z"></path>
    </svg>
    <input
      type="text"
      class="block w-full pr-9 h-input rounded ring-2 ring-red-200 border border-red-600 focus:outline-0 focus:ring-2 focus:ring-red-200 focus:border-red-800"
      placeholder="This is a sample input..."
    />
  </div>
  <p class="text-red-700 mb-xs">There was a probelm with your field entry...</p>
</div>

<h3 class="text-lg text-muted mb-xs">Disabled Fields</h3>
<p class="mb-md text-muted mb-md">
  Gray'd out and shadow removed to differentiate from active inputs.
</p>
<div class="mb-md">
  <label class="block mb-xs font-semibold text-muted">Sample Input</label>
  <input
    disabled
    type="text"
    class="block w-full h-input cursor-not-allowed rounded border bg-gray-100 border-gray-100"
    placeholder="This is a sample input..."
  />
</div>
